<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>进度条</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="./progress.css">
    <link rel="stylesheet" href="../icon.css">
    <link rel="stylesheet" href="../button/button.css">
</head>
<body>
<div class="page js_show" style="padding:10px">
    <div class="page__bd page__bd_spacing">
        <div class="progress">
            <div class="progress__bar">
                <div class="progress__inner-bar js_progress" style="width: 0%;"></div>
            </div>
            <a href="javascript:;" class="progress__opr">
                <i class="icon-cancel"></i>
            </a>
        </div>
        <br>
        <div class="progress">
            <div class="progress__bar">
                <div class="progress__inner-bar js_progress" style="width: 50%;"></div>
            </div>
            <a href="javascript:;" class="progress__opr">
                <i class="icon-cancel"></i>
            </a>
        </div>
        <br>
        <div class="progress">
            <div class="progress__bar">
                <div class="progress__inner-bar js_progress" style="width: 80%;"></div>
            </div>
            <a href="javascript:;" class="progress__opr">
                <i class="icon-cancel"></i>
            </a>
        </div>
        <div class="btn-area">
            <a href="javascript:;" class="btn btn_primary" id="btnUpload">上传</a>
        </div>
    </div>
</div>
<script>
    document.getElementById("btnUpload").onclick=function () {
        var _this=this;
        if(_this.classList.contains("btn_disabled"))return;
        _this.classList.add("btn_disabled");
        var step=2,target=100,progress=0,js_progress=document.getElementsByClassName("js_progress");
        var timer=setInterval(function () {
            progress+=step;
            if(progress<target){
                Array.apply([],js_progress).forEach(function (item) {
                    item.style.width=progress+"%"
                })
            }else{
                clearInterval(timer)
                Array.apply([],js_progress).forEach(function (item) {
                    item.style.width=target+"%"
                })
                _this.classList.remove("btn_disabled")
            }
        },30)
    }
</script>
</body>
</html>